<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h3>AI小课堂</h3>
          <p>探索人工智能的无限可能</p>
        </div>
        
        <div class="footer-section">
          <h4>快速链接</h4>
          <ul>
            <li><a href="#technologies">技术领域</a></li>
            <li><a href="#about">关于我们</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>联系我们</h4>
          <p>Email: yingjiongjiong@jinlanzuan.com</p>
          <p>持续更新AI前沿技术</p>
          <div class="opensource-link">
            <a href="https://gitee.com/yjj199/ai-class" target="_blank" rel="noopener noreferrer" class="opensource-btn">
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
              </svg>
              <span>项目开源地址</span>
              <span class="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>&copy; 2025 AI小课堂. All rights reserved.</p>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  background: rgba(26, 31, 53, 0.8);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(99, 102, 241, 0.2);
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--neon-blue), 
    var(--neon-purple), 
    var(--neon-pink), 
    transparent
  );
  background-size: 200% 100%;
  animation: border-flow 3s ease infinite;
}

@keyframes border-flow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3 {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.footer-section h4 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.footer-section p {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section ul li a {
  color: var(--text-secondary);
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-section ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--neon-blue);
  box-shadow: 0 0 5px var(--neon-blue);
  transition: width 0.3s ease;
}

.footer-section ul li a:hover {
  color: var(--neon-blue);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.footer-section ul li a:hover::after {
  width: 100%;
}

.opensource-link {
  margin-top: 1.5rem;
}

.opensource-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.opensource-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent);
  transition: left 0.5s ease;
}

.opensource-btn:hover::before {
  left: 100%;
}

.opensource-btn:hover {
  border-color: var(--neon-blue);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.3),
              0 0 40px rgba(0, 243, 255, 0.1);
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
}

.opensource-btn .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.opensource-btn:hover .icon {
  transform: scale(1.1) rotate(5deg);
}

.opensource-btn .arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.opensource-btn:hover .arrow {
  transform: translateX(4px);
}

.opensource-btn span {
  font-weight: 500;
}

.footer-bottom {
  border-top: 1px solid rgba(99, 102, 241, 0.2);
  padding-top: 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  position: relative;
}

.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-purple), transparent);
  box-shadow: 0 0 10px var(--neon-purple);
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .opensource-link {
    display: flex;
    justify-content: center;
  }
  
  .opensource-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}
</style>

